﻿
@{
    ViewBag.Title = "Foto Upload";
}

@using (Html.BeginForm("UploadTest", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
}

<div id="dropzone" class="noMaxW">
    <form action="~/Home/SaveUploadedFile" method="post" enctype="multipart/form-data" class="dropzone needsclick dz-clickable" id="dropzoneForm">
        <div class="dz-message needsclick" style="font-size: 45px;">
            <strong style="font-size: 50px; color:#160A47">DROP</strong> FOTO'S<br>OF <strong style="font-size: 50px; color:#160A47">KLIK</strong> VOOR<br><STRONG style="font-size: 70px; color:#160A47">UPLOAD</STRONG><br>          
            <div class="fallback">
                <input name="file" type="file" multiple />
                <input type="submit" value="Upload" />
            </div>
        </div>
    </form>
</div>
<div name="uploadOK" class="alertSuccess alert alert-success noMaxW">
    <strong>Success!</strong> De upload van bovenstaande foto's is voltooid.
</div>
<div name="uploadError" class="alertError alert alert-danger noMaxW">
    <strong>ERROR!</strong> De upload van één of meerdere foto's is mislukt.
</div>
<script>
    $(".alertError").hide();
    $(".alertSuccess").hide();
    //File Upload response from the server
        Dropzone.options.dropzoneForm = {
            addRemoveLinks: true,
            init: function () {
                this.on("complete", function (data) {
                    //var res = eval('(' + data.xhr.responseText + ')');
                    var res = JSON.parse(data.xhr.responseText);
                });
                this.on("error", function (data, errorMessage, xhr) {
                    $(".alertError").show();
                    $(".alertSuccess").hide();
                    $(".errMessage").text(errorMessage.Message);
                });
                this.on("processing", function (data) {
                    $(".alertError").hide();
                    $(".alertSuccess").hide();
                });
                this.on("success", function (data) {
                    $(".alertError").hide();
                    $(".alertSuccess").show();
                });
            }
        };                  
</script>